<template>
  <div class="comparison-container">
    <!-- Header -->
    <div class="title-card">
      <div class="main-title">家装无忧</div>
      <div class="sub-title">装企多维对比表</div>
    </div>

    <!-- Main Content -->
    <div v-if="currentView === 'home'" class="home-page">
      <!-- Company Types Section -->
      <div class="section-title">
        <i class="fas fa-building"></i>
        <span>常见装企类型</span>
      </div>

      <div class="cards-container">
        <div v-for="company in companies" :key="company.id" class="card" @click="showDetail(company)">
          <div class="card-header">
            <div class="card-title">{{ company.type }}</div>
            <div class="card-subtitle">{{ company.businessPosition }}</div>
          </div>

          <div class="card-content">
            <div class="info-group">
              <div class="info-label">适配客户</div>
              <div class="info-value">{{ company.suitableCustomer }}</div>
            </div>
          </div>

          <div class="card-footer">
            查看详情
          </div>
        </div>
      </div>

      <!-- Combination Services Section -->
      <div class="section-title">
        <i class="fas fa-link"></i>
        <span>常见多公司组合服务类型</span>
      </div>

      <div class="cards-container">
        <div v-for="service in combineServices" :key="service.id" class="card" @click="showDetail(service)">
          <div class="card-header">
            <div class="card-title">{{ service.type }}</div>
            <div class="card-subtitle">{{ service.businessPosition }}</div>
          </div>

          <div class="card-content">
            <div class="info-group">
              <div class="info-label">适配客户</div>
              <div class="info-value">{{ service.suitableCustomer }}</div>
            </div>
          </div>

          <div class="card-footer">
            查看详情
          </div>
        </div>
      </div>
    </div>

    <!-- Detail Page -->
    <div v-if="currentView === 'detail'" class="detail-page">
      <div class="detail-header">
        <h2 class="detail-title">{{ selectedItem.type }}</h2>
        <div class="detail-subtitle">{{ selectedItem.businessPosition }}</div>
      </div>

      <div class="detail-section">
        <h3 class="section-title-detail">核心优势</h3>
        <div class="section-content" v-html="formatContent(selectedItem.coreAdvantages)"></div>
      </div>

      <div class="detail-section">
        <h3 class="section-title-detail">风险预警</h3>
        <div class="section-content" v-html="formatContent(selectedItem.riskWarning)"></div>
      </div>

      <div class="detail-section">
        <h3 class="section-title-detail">签约前必查项</h3>
        <div class="section-content" v-html="formatContent(selectedItem.requiredChecks)"></div>
      </div>

      <div class="back-btn-container">
        <el-button type="primary" @click="goBack" class="back-btn">
          返回上一页
        </el-button>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <el-button type="primary" size="large" class="backBtn" @click="backToHome">
        返回首页
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyComparisonView',
  data() {
    return {
      currentView: 'home',
      selectedItem: null,
      companies: [
        {
          id: "1",
          type: "工长直管型",
          businessPosition: "劳务输出型",
          suitableCustomer: "理智务实型",
          coreAdvantages: "直接成本控制：工长直接管理工人与材料采购，减少中间环节加价；<br>流程响应快：问题现场决策，无层级审批延迟。",
          riskWarning: "工伤担责风险：工长个人承担风险能力有限，重大事故牵连业主；<br>工艺标准化弱：依赖工长经验，不同工长施工质量差异大。",
          requiredChecks: "工长本人工伤及意外伤害责任保险凭证；<br>明确意外责任承担方；<br>核实工长在管工地数量及精力分配；<br>明确分阶段付款节点并与工程进度严格挂钩。"
        },
        {
          id: "2",
          type: "套餐整装公司",
          businessPosition: "标准化快装型",
          suitableCustomer: "省心便利型 / 理智务实型",
          coreAdvantages: "性价比明确：基础套餐涵盖主流材料与工序，适合标准化需求；<br>供应链效率：集中采购降低主材成本，缩短工期。",
          riskWarning: "增项隐蔽性：水电改造、墙面找平等易成漏项重灾区；<br>材料降配风险：同品牌下低端系列替代宣传样品。",
          requiredChecks: "书面约定增项总金额上限（占合同额百分比或固定金额，超支由装企承担）；<br>材料清单细化：要求标注主材品牌、系列、型号、规格（附照片/样品确认）；<br>仔细核对套餐包含的具体施工项目范围，特别是基础处理部分（如墙面平整度要求、水电点位数量限制等）。"
        },
        {
          id: "3",
          type: "设计工作室",
          businessPosition: "创意驱动型",
          suitableCustomer: "视觉导向型 / 品质严控型",
          coreAdvantages: "创意落地能力：设计师深度参与全程把控，确保设计理念与实际效果的高度统一；<br>个性化资源：具备较强的整合小众材料、定制家具等非标产品渠道的能力。",
          riskWarning: "施工衔接断层：设计师与施工队沟通不足或理解偏差，易导致最终效果与设计图不符；<br>软装代购加价隐性：代购主材或家具时，佣金或加价比例未提前充分告知，可能推高整体预算。",
          requiredChecks: "设计责任绑定：合同注明主设计师全程跟进节点次数（如≥5次交底）；<br>代购透明度：要求所有代购服务提供书面报价单，明确标注商品原价与代购服务费（或承诺合理加价范围）；<br>确认设计师是否具备协调管理施工方的经验或能力。"
        },
        {
          id: "4",
          type: "高端全案公司",
          businessPosition: "高端定制服务型",
          suitableCustomer: "品质严控型 / 高净值人群",
          coreAdvantages: "全链条服务：设计、施工、软装、采购一站式统筹，极大减少业主对接不同供应商的摩擦与时间成本；<br>配备专属项目经理全程把控进度与质量，问题响应时效性高。",
          riskWarning: "工期不可控：定制材料多、进口周期长、定制环节复杂，易发生连环延误；<br>高价材料保真难：小众进口材料或非标定制产品，市场验证渠道少，真伪鉴别难度大。",
          requiredChecks: "延期阶梯赔付：明确超期赔偿标准（如＞30天按日0.1%计赔）；<br>材料溯源条款：要求提供关键材料（特别是进口、小众、高价材料）的报关单、原厂授权书、采购合同复印件等，并明确约定假一赔三等违约责任；<br>审核项目经理过往同类型项目的管理经验与口碑。"
        },
        {
          id: "5",
          type: "高端施工公司",
          businessPosition: "工艺严控型",
          suitableCustomer: "品质严控型",
          coreAdvantages: "工艺标准化：通常拥有自建或深度绑定的产业工人队伍及严格培训体系，工地质量统一性高；<br>隐蔽工程保障：水电、防水等基础及关键项目验收标准严格，注重长期使用可靠性。",
          riskWarning: "设计适配不足：专注施工工艺易忽视空间美学、动线规划等细节，需业主额外投入精力协调独立设计方或自行把控；<br>单价虚高：部分特色工艺或管理费报价可能显著高于市场平均水平，缺乏直观参照。",
          requiredChecks: "索要企业内部详细的工艺白皮书或施工标准文件（如防水涂刷遍数、厚度、闭水试验时长等）；<br>若涉及第三方设计方，必须签订三方协议（业主、设计方、施工方），明确各方权责，特别是施工过程中因设计图纸或现场指导问题导致的责任归属与解决流程；<br>要求提供主要施工工人的技能资质证明或培训记录。"
        },
        {
          id: "6",
          type: "软装公司",
          businessPosition: "颜值提升型",
          suitableCustomer: "视觉导向型",
          coreAdvantages: "空间氛围营造：专业软装搭配能力突出，能显著提升空间整体视觉效果与居住舒适度；<br>安装售后集成：窗帘、灯具、家具等产品通常包含专业测量、安装及基础售后服务，提供一站式便利。",
          riskWarning: "环保隐患：布艺填充物、板材家具等材料可能甲醛、TVOC等有害物质释放超标，影响室内空气质量；<br>硬装损伤纠纷：灯具打孔、大型家具搬运安装过程中，存在磕碰、划伤、污染原有硬装（墙面、地板、门窗等）的风险，易引发赔偿争议。",
          requiredChecks: "环保检测承诺：要求布料、填充物、板材类家具等关键材料提供近期的、具备专业机构出具的环保检测合格报告；<br>硬装保护条款：在合同中书面约定施工前需采取的硬装保护措施（如地面保护膜、墙角护条等）、施工过程中造成损伤的修复标准、责任方及赔偿方案；<br>明确家具灯具等产品的送货、安装时间及延误责任。"
        }
      ],
      combineServices: [
        {
          id: "cs1",
          type: "平台整合",
          businessPosition: "资源撮合平台",
          suitableCustomer: "省心便利型 / 理智务实型",
          coreAdvantages: "装企资源丰富：可提供多种类型、不同档次的装企供选择，信息相对集中；<br>资金托管：提供第三方支付担保或托管服务，理论上保障资金安全。",
          riskWarning: "责任推诿：平台、设计师、施工方、材料商等多方参与，权责界定模糊，易出现互相推诿、踢皮球现象；<br>平台运营风险：平台自身运营不善、监管不力或资金链断裂，可能导致服务中断、质量失控甚至资金安全风险；<br>缺乏统一服务标准：入驻装企水平参差不齐，平台难以保证统一的服务和工艺标准。",
          requiredChecks: "仔细阅读并理解平台提供的资金托管/担保协议细则，明确资金释放条件、退款流程及平台兜底责任范围；<br>对平台推荐的装企进行独立背景调查（口碑、资质、在平台的历史投诉及解决情况）；<br>明确平台在纠纷协调中的具体角色、权限和响应时效；<br>核实平台自身的运营资质、市场口碑及投诉处理机制。"
        },
        {
          id: "cs2",
          type: "设计公司+施工公司",
          businessPosition: "设计主导型施工",
          suitableCustomer: "视觉导向型 / 品质严控型",
          coreAdvantages: "设计施工协同服务：设计方与施工方建立相对稳定的合作关系，设计意图传达相对顺畅；<br>设计落地保障：施工方基于对设计方风格和要求的理解，提升设计实现效果。",
          riskWarning: "变更纠纷：施工过程中因现场条件、业主新需求或设计方主动调整方案导致的变更，易引发费用、工期及责任归属争议；<br>责任推诿：当出现施工质量问题或效果偏差时,设计方与施工方可能互相指责，推卸责任；<br>沟通成本增加：业主需要同时协调设计方和施工方，沟通环节增多。",
          requiredChecks: "要求设计方与施工方共同参与签约，并签订三方协议（业主、设计、施工），清晰界定各方职责、协作流程（尤其是设计交底与现场对接）、问题响应机制及最终责任归属；<br>合同中设立清晰的设计变更确认流程与费用核算标准（需业主书面确认生效）；<br>考察设计方与施工方既往合作项目的案例与口碑。"
        },
        {
          id: "cs3",
          type: "设计公司+施工公司+软装公司",
          businessPosition: "全案托管",
          suitableCustomer: "视觉导向型 / 品质严控型 / 高净值人群",
          coreAdvantages: "全流程协同服务：覆盖设计、硬装施工、软装搭配及安装全流程，业主对接单一化，省心省力；<br>风格统一保障：由设计方主导协调硬装与软装，最大程度保证整体空间风格的统一性和完整性。",
          riskWarning: "多环节责任推诿：参与方更多（设计、硬装、软装、主材、定制等），环节复杂，一旦出现问题，责任认定与追溯更加困难；<br>主材/定制/软装供应与安装时序衔接风险：定制家具生产周期、进口材料清关、软装采购等环节极易延误或出错，导致硬装完工后长时间空置等待，或安装时尺寸、颜色、质量不符引发纠纷；<br>沟通协调成本高、效率低：信息需在多个供应商间传递，容易造成信息失真或延误，影响整体效率；<br>整体费用高昂且不易拆分比较。",
          requiredChecks: "合同中必须明确指定唯一的总负责人（通常来自主导方，如设计公司），并详细规定其在整个项目中的管理权限、协调责任及问题兜底义务；<br>要求提供详尽的、带有时效节点的整体项目进度计划表，特别是主材下单、定制生产、软装采购及安装的关键时间窗口；<br>书面约定各类材料（主材、定制家具、软装产品）的进场计划、现场保护要求、验收标准及时效；明确各环节延误的违约责任与赔偿方案；<br>考察总负责人过往管理复杂全案项目的经验和能力。"
        }
      ]
    }
  },
  methods: {
    showDetail(item) {
      this.selectedItem = item
      this.currentView = 'detail'
    },
    goBack() {
      this.currentView = 'home'
      this.selectedItem = null
    },
    backToHome() {
      this.$router.push('/')
    },
    formatContent(content) {
      return content.split('<br>').map(item =>
        `<p style="margin-bottom: 10px;">${item.trim()}</p>`
      ).join('')
    }
  }
}
</script>

<style scoped>
.comparison-container {
  min-height: 100vh;
  background: #f8fcf8;
  color: #333;
  line-height: 1.4;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

.home-page {
  padding: 0 14px 60px 14px;
}

.title-card {
  background: #1b5e20;
  box-shadow: 0 3px 8px rgba(27, 94, 32, 0.2);
  padding: 15px;
  text-align: center;
  position: relative;
  border: 1px solid #e0f0e0;
}

.main-title {
  font-size: 1.8rem;
  color: white;
  font-weight: 700;
  margin-bottom: 5px;
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
}

.sub-title {
  font-size: 1rem;
  color: #e8f5e9;
  font-weight: 400;
  letter-spacing: -0.3px;
}

.section-title {
  font-size: 1.1rem;
  color: white;
  margin: 20px 0 12px;
  padding: 10px;
  background: #1b5e20;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 35px;
  letter-spacing: -0.3px;
}

.section-title i {
  position: absolute;
  left: 10px;
  background: #e8f5e9;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #1b5e20;
  font-size: 0.9rem;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards-container {
    grid-template-columns: 1fr;
  }
}

.card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(30, 90, 40, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid #e0f0e0;
  text-align: left;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(30, 90, 40, 0.15);
}

.card-header {
  background: #c8e6c9;
  color: #1b5e20;
  padding: 12px;
  border-bottom: 1px solid #a5d6a7;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.card-subtitle {
  font-size: 0.8rem;
  color: #2e7d32;
}

.card-content {
  padding: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.info-group {
  margin-bottom: 12px;
}

.info-label {
  font-weight: 600;
  color: #1b5e20;
  margin-bottom: 5px;
  font-size: 0.85rem;
  letter-spacing: -0.3px;
}

.info-value {
  font-size: 0.8rem;
  color: #444;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.card-footer {
  background: #f5fbf5;
  padding: 8px 12px;
  text-align: right;
  color: #388e3c;
  font-weight: 500;
  border-top: 1px solid #e0f0e0;
  font-size: 0.85rem;
  letter-spacing: -0.2px;
}

.detail-page {
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(30, 90, 40, 0.15);
  padding: 15px;
  margin: 8px 0 15px;
  flex-grow: 1;
}

.detail-header {
  margin-bottom: 12px;
  padding: 12px;
  border-bottom: 2px solid #e0f0e0;
  position: relative;
  text-align: center;
  background: #2e7d32;
  border-radius: 8px;
  color: white;
}

.detail-title {
  font-size: 1.2rem;
  color: white;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.detail-subtitle {
  color: #e8f5e9;
  font-size: 0.9rem;
  letter-spacing: -0.2px;
}

.detail-section {
  margin-bottom: 15px;
  background: #f9fff9;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e0f0e0;
  position: relative;
}

.section-title-detail {
  font-size: 1rem;
  color: #2e7d32;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #c8e6c9;
  letter-spacing: -0.3px;
}

.section-content {
  padding-left: 5px;
}

.section-content p {
  margin-bottom: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #444;
  letter-spacing: -0.2px;
}

.back-btn-container {
  text-align: center;
  margin: 15px 0 8px;
  padding: 0 24px;
}

.back-btn {
  width: 100%;
  max-width: 100%;
  height: 45px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  background-color: #2e7d32;
}

.backBtn {
  background-color: #2e7d32;
  border-radius: 8px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  text-align: center;
  padding: 10px 20px;
}

.nav-buttons {
  margin-bottom: 10px;
}

.nav-buttons .el-button {
  width: 100%;
  height: 45px;
  font-size: 14px;
  margin-bottom: 10px;
}

.copyright {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.8;
}

/* 手机端优化 */
@media (max-width: 768px) {
  .comparison-container {
    font-size: 13px;
    overflow-x: hidden;
  }

  .title-card {
    padding: 12px;
  }

  .main-title {
    font-size: 1.5rem;
  }

  .sub-title {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 1rem;
    margin: 15px 0 10px;
    padding-left: 32px;
  }

  .section-title i {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 0.85rem;
  }

  .card-header {
    padding: 10px;
  }

  .card-title {
    font-size: 0.95rem;
  }

  .card-content {
    padding: 8px;
  }

  .info-label,
  .info-value {
    font-size: 0.78rem;
  }

  .detail-page {
    padding: 12px 10px;
  }

  .detail-title {
    font-size: 1.1rem;
  }

  .detail-subtitle {
    font-size: 0.85rem;
  }

  .section-title-detail {
    font-size: 0.95rem;
  }

  .back-btn {
    padding: 8px 25px;
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .main-title {
    font-size: 1.3rem;
  }

  .sub-title {
    font-size: 0.85rem;
  }

  .section-title {
    font-size: 0.95rem;
    padding-left: 30px;
  }

  .section-title i {
    width: 26px;
    height: 26px;
    line-height: 26px;
  }

  .section-content p {
    font-size: 0.8rem;
  }
}
</style>